<template>
	<!-- 横向滚动评论 -->
	<view class="p-2">
		<scroll-view class="scroll-row " :scroll-x="true">
			<view class="scroll-row-item rounded bg-light-secondary mr-2 p-2" 
			style="width: 620rpx;height: 380rpx;"
			v-for="(item, index) in comments" :key="index">
				<view class="d-flex a-center mb-1">
					<image :src="item.avatar" mode="widthFix"
					style="width: 70rpx;height: 70rpx;"
					class="rounded-circle"></image>
					<view class="ml-2 ">
						<text class="font-md line-h">{{item.nickName}}</text>
						<text class="d-block font text-light-muted">{{item.createTime}}</text>
					</view>
					<view class="iconfont icon-dianzan text-light-muted font ml-auto">
						<text class="pl-1">{{item.goodsNum}}</text>
					</view>
					
				</view>
				<view class="d-flex flex-wrap mb-2">
					<text class="font-md text-muted text_hide_2 line-h-sm">{{item.context}}</text>
				</view>
				<view class="row">
					<view class="span24-8 px-2"
					v-for="(item2, index2) in item.imgList.slice(0,3)">
						<image :src="item2"
						style="height: 115rpx;"
						mode="widthFix"
						class="rounded"></image>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 更多评论 -->
		<navigator url="/pages/detail-comment/detail-comment">
			<view class="d-flex font-lg text-primary a-center j-center py-2 mt-2"
			hover-class="bg-light-secondary">
				更多评论<view class="iconfont icon-you"></view>
			</view>
		</navigator>
	</view>
</template>

<script>
	export default {
		props: {
			comments : {
				type: Array
			}
		}
	}
</script>

<style>
</style>
